<template>
  <div id="login">
    <div class="top-back-wrapper">
      <v-top-back ref="topBack" siteName="Vue-CN-Node社区 登录"></v-top-back>
    </div>
    <div class="login-center">
      <div class="login-content">
        <v-input :title="title" :label="label" v-model="tokenValue"></v-input>
        <p class="login-desc">请前往CN-Nodejs社区，将设置页面中的Access Token 复制到上方区域，进行登录</p>
        <button type="button" class="login-send" @click="login&&loginIn()">确定</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopBack from 'components/top-back/top-back'
  import {trim} from 'common/js/util'
  import {mapActions} from 'vuex'
  import Input from 'base/input/input'
  import {Alert} from 'common/js/mixin'

  export default {
    mixins: [Alert],
    data() {
      return {
        title: 'Access Token',
        label: '请输入您的Token',
        login: false,
        tokenValue: ''
      }
    },
    computed: {},
    methods: {
      loginIn() {
        if (trim(this.tokenValue) === '') {
          return false
        } else {
          this.userLogin(this.tokenValue).then((res) => {
            if (res.success === true) {
              this.showAlert({
                content: '登录成功！'
              })
              this.tokenValue = ''
              this.$refs.topBack.back()
            } else {
              this.showAlert({
                style: 'warning',
                content: res.error_msg
              })
              this.login = false
            }
          })
        }
      },
      ...mapActions([
        'userLogin'
      ])
    },
    watch: {
      tokenValue(val) {
        if (val) {
          this.login = true
        }
      }
    },
    components: {
      'v-top-back': TopBack,
      'v-input': Input
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #login {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    background-color: $color-text-w;
    .login-center {
      position: absolute;
      top: 45px;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      overflow: auto;
      box-sizing: border-box;
      padding: 15px 15px 0 15px;
      .login-content {
        width: 100%;
        background-color: $color-text-w;
        box-shadow: 0 0 8px $color-background-d;
        box-sizing: border-box;
        padding: 10px 15px 20px 15px;
        p.login-desc {
          display: block;
          font-size: $font-size-medium;
          line-height: 1.5;
          color: $color-text-bb;
          margin: 0 auto 15px;
          width: 95%;
        }
        .login-send {
          width: 100%;
          margin: 0 auto;
          display: block;
          border: none;
          border-radius: 2px;
          height: 34px;
          line-height: 34px;
          background-color: #2196f3;
          color: $color-text-w;
          font-size: $font-size-medium;
          cursor: pointer;
          box-shadow: 0 0 5px $color-background-d;
        }
      }
    }
  }
</style>
